PRELOADER

不念过去 不负现在 不畏将来

当前文章 : 《猜歌游戏小结(四) 设置自定义布局》

12/4/2018 —— 

一、说明

在这个游戏中,游戏下方具有3*8,共24个文字待选框。这几个文字待选框中的内容为随机生成的文字,其中包括有正确答案和干扰文字。而这个文字待选框布局不是系统默认存在的布局,所以需要自定义设置。

二、方法

  • 1、每个一文字待选框,均可以看成是一个button控件。
public class WordButton {

    public int mIndex; //位置索引
    public boolean mIsVisiable;  //是否可见
    public String mWordString;  //显示内容

    public Button mViewButton;

    //构造函数,初始属性
    public WordButton() {
        mIsVisiable = true;
        mWordString = "";
    }

}
  • 2、自定义一个View,继承自GridView。用于设置文字待选框。
public class MyGridView extends GridView{

    private ArrayList<WordButton> mArrayList = new ArrayList<WordButton>();
    private MyGridAdpater myAdpater;

    public MyGridView(Context context, AttributeSet attrs) {
            super(context, attrs);

            mContext = context;

            myAdpater = new MyGridAdpater();//初始化
            this.setAdapter(myAdpater);//关联
        }

    class MyGridAdpater extends BaseAdapter{
        @Override
        public int getCount() {
            return mArrayList.size();
        }

        @Override
        public Object getItem(int position) {
            return mArrayList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            return convertView;
        }
  • 3、定义WordButton对象对应的布局。GridView里面,有24个WordButton对象,而每一个WordButton对象对应的布局需要重新定义,文件名为self_ui_gridview_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/item_btn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/word_button_icon"//设置点击效果
      android:text="d"
      android:textColor="@color/black"
      android:textSize="20sp"/>
    
  • 4、将布局和代码建立关联。建立关联的方法是使用LayoutInflater.设置Adpater的getView方法,该方法的放回值是一个VIew,所以可以新建一个工具类,即新建一个Util文件夹,并在该文件夹下新建一个Util类,其中定义一个getVIew方法。

    public static View getView(Context context,int layoutId){
        LayoutInflater layoutInflater = (LayoutInflater)context.
                getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View layout = layoutInflater.inflate(layoutId,null);

        return layout;
    }
  • 5、设置getView方法。
@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final WordButton holder;

        if ( convertView == null){
            convertView = Util.getView(mContext, R.layout.self_ui_gridview_item);

            holder = mArrayList.get(position);

            //加载动画
            mScaleAnimation = AnimationUtils.loadAnimation(mContext,R.anim.scale);

            // 设置动画的延迟时间
            mScaleAnimation.setStartOffset(position * 100);

            // 初始化控件
            holder.mIndex = position;
            holder.mViewButton = (Button)convertView.findViewById(R.id.item_btn);

            holder.mViewButton.setOnClickListener(new View.OnClickListener(){
                @Override
                public void onClick(View arg0) {
                    mWordButtonListener.onWordButtonClick(holder);
                }
            });

            convertView.setTag(holder);
        }else {
            holder = (WordButton)convertView.getTag();
        }

        holder.mViewButton.setText(holder.mWordString);

        // 播放动画
       // convertView.startAnimation(mScaleAnimation);
        return convertView;
    }